<template>
  <div class="inspectPdf">
    <div class="pdf-btn" @click="htmlToPdf">下载</div>
    <div class="back-btn" @click="$router.back()">返回</div>

    <div class="matterList page">
      <!-- <div class="right-title">{{ 111555 }}</div> -->

      <div class="recordTable">
        <div class="nameTitle">房屋租赁合同</div>

        <div class="details-table detailModal">
          <div class="stepTable">
            <div class="actualUnitDetails">
              <div class="companyinfo">
                <table>
                  <tr>
                    <td class="td_title" colspan="1">出租房(甲方)</td>
                    <td class="padNone font-w" colspan="1">{{ $route.query.hostName || '暂无' }}</td>
                    <td class="td_title" colspan="1">承租方(乙方)</td>
                    <td class="padNone font-w" colspan="1">{{ $route.query.tenantryName || '暂无' }}</td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">身份证号</td>
                    <td class="padNone font-w" colspan="1">{{ $route.query.hostCard || '暂无' }}</td>
                    <td class="td_title" colspan="1">身份证号</td>
                    <td class="padNone font-w" colspan="1">{{ $route.query.tenantryCard || '暂无' }}</td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">联系电话</td>
                    <td class="padNone font-w" colspan="1">{{ $route.query.hostMobile || '暂无' }}</td>
                    <td class="td_title" colspan="1">联系电话</td>
                    <td class="padNone font-w" colspan="1">{{ $route.query.tenantryMobile || '暂无' }}</td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">房屋信息</td>
                    <td class="padNone padNone2" colspan="5">
                      房屋地址:<span class="dotted">{{ $route.query.addressDetail }}</span
                      >,房屋面积:<span class="dotted">{{ $route.query.rentalHouseArea }}</span
                      >㎡
                    </td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">租房用途</td>
                    <td class="padNone padNone2" colspan="5">
                      乙方所租房屋仅为<span class="dotted">{{ getDictType(rental_use, $route.query.rentalUse) }}</span
                      >使用;不得进行任何违法活动，否则后果自负。
                    </td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">租赁期限</td>
                    <td class="padNone padNone2" colspan="5">
                      <span class="dotted">{{ formatDate($route.query.beginTime, 0) }} </span>
                      年
                      <span class="dotted">{{ formatDate($route.query.beginTime, 1) }}</span>
                      月 <span class="dotted">{{ formatDate($route.query.beginTime, 2) }}</span> 日至
                      <span class="dotted">{{ formatDate($route.query.endTime, 0) }}</span>
                      年
                      <span class="dotted">{{ formatDate($route.query.endTime, 1) }}</span>
                      月
                      <span class="dotted">{{ formatDate($route.query.endTime, 2) }}</span>
                      日。
                    </td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">押金及支付方式</td>
                    <td class="padNone padNone2" colspan="5">
                      房屋月租金为<span class="dotted">{{ $route.query.rentalRent }}</span
                      >元，押金为 <span class="dotted">{{ $route.query.securityDeposit }}</span
                      >元，乙方支付租金应在每月 <span class="dotted">{{ $route.query.rentTime }}</span
                      >日前，合同有效期内，租金不再调整。　
                    </td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">租房条款</td>
                    <td class="padNone padNone2" colspan="5">
                      <p>第一条：出租方责任及义务</p>
                      <p>
                        1、租赁期内不得无故收回房屋，如甲方中途将房屋收回，甲方应退还剩余房款，须另外补偿因搬迁给乙方造成的费用并交纳壹个月租金作为向乙方的补偿金。
                      </p>
                      <p>2、租赁房屋内各项设施如损坏，甲方有义务与相关维修部门联系，进行及时处理。</p>
                      <p>第二条：承租方责任及义务</p>
                      <p>
                        1、乙方应按照本合同规定的日期和金额交纳租金，逾期未缴付租金，按照所欠租金的0.5%计算滞纳金。超过15日未付清，视为提前终止合同，甲方有权收回房屋。乙方租赁期内不得无故退租，如乙方中途退租，乙方应补偿给甲方壹个月的租金作为补偿；
                      </p>
                      <p>2、乙方不得利用此房屋进行非法活动，储藏违法物品或危险物品；</p>
                      <p>3、租赁期内未经甲方同意，不得擅自将房屋转租、分租、转让、转借、联营、入股或与他人调剂交换；</p>
                      <p>
                        4、乙方应爱护房屋及其设施（详见附件1），室内一切设施属人为损坏，乙方应负责赔偿，属自然损坏，乙方不予赔偿。
                      </p>
                      <p>第三条：违约责任</p>
                      <p>1、甲方向乙方收取约定合同外的费用，乙方有权拒付。</p>
                      <p>2、乙方向甲方提出合同约定外的补偿，甲方有权拒付。</p>
                      <p>第四条：租赁期间房屋的维修</p>
                      <p>
                        乙方因使用需要，不影响房屋结构的前提下，可对承租房进行维修，但应事先得到甲方和物业管理公司的同意后方可施工，租赁期满后乙方不得拆除已装修部分，不得向甲方索取装修费用。
                      </p>
                      <p>第五条：乙方有下列情况之一的，甲方可终止合同，收回房屋。</p>
                      <p>
                        1、乙方超过合同规定日期不缴纳租金并押金不足以抵扣租金、滞纳金，且与乙方无法取得联系时，甲方有权请公证处公正撬开房门，室内一切物品由甲方代为保管三个月，若三个月内仍无法与乙方取得联系，甲方有权对保管物品进行处理。
                      </p>
                      <p>2、乙方使用此房屋进行违法行为。</p>
                      <p>3、未经甲方同意擅自改变房屋结构。</p>
                      <p>第六条：免责条件</p>
                      <p>1、房屋因不可抗力的因素，导致甲乙双方受损，甲乙双方互不承担责任，甲方因退还乙方剩余租金。</p>
                      <p>2、因市政建设需要拆迁或改造</p>
                    </td>
                  </tr>
                  <tr>
                    <td class="td_title" colspan="1">补充条款</td>
                    <td
                      class="padNone padNone2 text-break"
                      colspan="5"
                      style="max-width: 0"
                      v-html="$route.query.rentalSupplement"
                      v-if="$route.query.rentalSupplement"
                    ></td>
                    <td class="padNone padNone2" colspan="5" v-else>暂无</td>
                  </tr>

                  <tr class="signature-info">
                    <td colspan="6">
                      <div class="flex">
                        <div class="partyA f1">
                          <div class="signature">甲方(签名)： <img :src="imgPrefix + $route.query.hostSign" /></div>
                          <div class="sign-time">
                            签约日期:
                            <span class="date"
                              >{{ formatDate($route.query.beginTime, 0) }}年{{
                                formatDate($route.query.beginTime, 1)
                              }}月{{ formatDate($route.query.beginTime, 2) }}日</span
                            >
                          </div>
                        </div>
                        <div class="partyB f1">
                          <div class="signature">已方(签名)： <img :src="imgPrefix + $route.query.tenantrySign" /></div>
                          <div class="sign-time">
                            签约日期:
                            <span class="date"
                              >{{ formatDate($route.query.beginTime, 0) }}年{{
                                formatDate($route.query.beginTime, 1)
                              }}月{{ formatDate($route.query.beginTime, 2) }}日</span
                            >
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ajaxGetDictItems } from '@/api/api'
import { comMethods } from '@/mixins/comMethods'
import { addHtmlStyleProps, removeHtmlStyleProps } from '../../../utils/util'
export default {
  name: 'belowthemarkPdf',
  mixins: [comMethods],
  data() {
    return {
      rental_use: [],
      policeCheckTaskInfo: {},
    }
  },
  mounted() {
    addHtmlStyleProps()
    document.getElementsByClassName('ant-layout-header')[0].style.display = 'none'
    if (document.getElementsByClassName('ant-layout-footer')[0]) {
      document.getElementsByClassName('ant-layout-footer')[0].style.display = 'none'
    }

    this.get_dict()
  },
  methods: {
    htmlToPdf() {
      document.head.getElementsByTagName('title')[0].innerText = '房屋租赁合同'
      window.print()
      window.location.reload()
    },

    /**
     * @description 格式化日期时间字符串，只保留日期部分。
     * @param {string} dateTimeString - 日期时间字符串
     * @returns {string} 格式化后的日期字符串
     */
    formatDate(dateTimeString, type) {
      if (!dateTimeString) {
        return ''
      }
      const datePart = dateTimeString.split(' ')[0].split('/')
      return datePart[type]
    },

    async get_dict() {
      let { result: rental_use } = await ajaxGetDictItems({ code: 'rental_use' })
      this.rental_use = rental_use
    },

    getDictType(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },
  },
  destroyed() {
    removeHtmlStyleProps()

    document.getElementsByClassName('ant-layout-header')[0].style.display = 'block'
    document.getElementsByClassName('ant-layout-footer')[0].style.display = 'block'
  },
}
</script>

<style scoped lang="less" scoped>
.inspectPdf {
  padding-bottom: 15px;

  .cusImg {
    object-fit: cover;
  }
}

table {
  // border: 1px !important;
  tr {
    page-break-inside: avoid;
  }
}
.attachment {
  page-break-inside: avoid;
}

.signature-info {
  height: 245px;
  img {
    width: 325px;
    height: 175px;
  }
}

.padNone2 {
  color: #999999 !important;
}

.dotted {
  padding: 0 10px;
  &::before {
    content: '    ';
  }
  &::after {
    content: '    ';
  }
  color: #000;
  font-weight: 700;
  text-decoration: underline;
}

.date,
.font-w {
  color: #000 !important;
  font-weight: 700 !important;
}
</style>
